@import './_var.scss';

.m-checkbox {
  display: inline-block;
  cursor: pointer;
  &.disabled {
    color: #999;
    cursor: not-allowed;
  }
  .check-btn {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #bfcbd9;
    background: #f1f1f1;
    border-radius: 2px;
    vertical-align: bottom;
  }
  input {
    width: 0;
    height: 0;
    opacity: 0;
    &:checked + .check-btn {
      &::before {
        content: "";
        position: absolute;
        top: 11px;
        left: 3px;
        width: 7px;
        height: 2px;
        background: red;
        transform: rotate(35deg);
        border-radius: 4px;
        background: $color-main;
      }
      &::after {
        content: "";
        position: absolute;
        top: 8px;
        left: 6px;
        width: 12px;
        height: 2px;
        background: red;
        transform: rotate(120deg);
        border-radius: 2px;
        background: $color-main;
      }
      transition: all .2s;
      // border-color: #ffff;
      background: #ffffff;
    }
  }
}